<template>
  <view class="container_page">
    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions"></action-bar>

    <view class="header">
      <header-step :curStep="step.curStep" @stepClick="stepClick($event)" :title="step.title" />
    </view>

    <view class="main" style="height: calc(100% - 360rpx); min-height: 0;">
      <step-one v-show="step.curStep === 0" ref="stepOne" />
      <step-two v-show="step.curStep === 1" ref="stepTwo" />
      <step-three v-show="step.curStep === 2" ref="stepThree" />
    </view>

    <view class="footer" :style="paddingBottom">
      <view class="footer-submit" @click="next()" v-if="step.curStep == 0">下一步</view>

      <view @click="goback()" class="btn_prev" v-if="!step.curStep == 0">上一步</view>
      <view class="footer-submit" v-if="step.curStep == 1" @click="next()">下一步</view>
      <view class="footer-submit" @click="navTo" v-if="step.curStep == 2 && !status_submit">注册</view>
      <view v-else-if="status_submit">正在保存中，请稍后</view>
    </view>
    <toast></toast>
  </view>
</template>

<script>
import headerStep from '../components/headerStep'
import StepOne from './stepOne.vue'
import StepTwo from './stepTwo.vue'
import StepThree from './stepThree.vue'
let _ = require('lodash')
export default {
  components: { headerStep, StepOne, StepTwo, StepThree },
  data() {
    return {
      // 导航栏参数
      navOptions: {
        left: {
          style: 'color:#222222;',
          icon: 'back',
        },
        center: {
          style: 'color:#222222;',
          title: '消防技术服务机构信息注册',
        }
      },
      status_submit: false, // 防抖
      step: {
        title: ['法定代表人信息', '单位信息', '工作场所信息'],
        curStep: 0,
      }
    }
  },
  created() {
    // 清空拍照图片
    this.$store.state.login.form = {
      image: '', // 人像采集
      positivePhoto: '', // 身份证人像面
      backPhoto: '', // 身份证国徽面
    }
  },
  methods: {

    // 步骤点击 回调事件
    stepClick(step) {
      this.step.curStep = step
    },
    // 提交报错后，重新填写跳转
    errReSelect(errTip) {
      let step = 0
      // 根据错误信息中的表单名 获取第几步，然后进行跳转，因为默认是0，所以不用判断第一步
      if (errTip.indexOf('法定代表人信息') !== -1 || errTip.indexOf('证件号码') !== -1 || errTip.indexOf('手机号码') !== -1) {
        step = 0
      }
      else if (errTip.indexOf('单位信息') !== -1 || errTip.indexOf('联系人联系方式') !== -1) {
        step = 1
      }
      else if (errTip.indexOf('工作场所信息') !== -1) {
        step = 2
      }
      this.step.curStep = step
    },
    // 下一步
    next() {
      this.step.curStep = this.step.curStep + 1
    },
    // 上一步
    goback() {
      this.step.curStep = this.step.curStep - 1
    },
    // 注册
    navTo() {
      /*  result:校验结果,errMsg:校验失败的提示语
                校验引入的表单组件,如果该表单中有校验方法,
                校验错误 把结果改为false
                校验成功 取值
            */
      if (this.status_submit) {
        this.$showToast({
          show: true,
          text: '正在保存中，请稍后'
        });
      } else {
        this.status_submit = true
        let errMsg = ''
        let formObject = {}
        // 校验是否成功
        let result = true
        // 校验
        for (const key in this.$refs) {
          const item = this.$refs[key]
          // 布尔类型时为true，其他类型为字符串 值为错误的表单名
          if (typeof (item.validateForm) !== 'undefined' && typeof (item.validateForm()) !== 'boolean') {
            result = false
            errMsg += this.$refs[key].validateForm()
          } else {
            // 没有校验 或者校验成功
            formObject = _.merge({}, formObject, item.form)
          }
        }
        // 如果校验通过
        if (result) {
          // 处理服务类型
          formObject.serviceType = formObject.serviceType.join(',')
          // 调用接口
          this.$store.dispatch('addOrganization', formObject).then((res) => {
            if (res.code === 200) {
              //! 二期项目需求变更: 注册通过后，后端直接返回一个token，随后跳转至首页即可
              uni.reLaunch({
                url: "/pages/layout/index",
              });
            } else {
              // 显示错误信息
              uni.showToast({
                icon: 'none',
                title: res.msg,
                duration: 2000
              });
            }
          }).finally(() => {
            this.status_submit = false
          })
        } else {
          //! 校验失败
          this.status_submit = false
          const errTip = errMsg.substring(0, errMsg.length - 1) + '填写错误!'
          // 显示错误信息
          this.$showToast({
            show: true,
            text: errTip,
            duration: '2000'
          })
          // 跳转至对应页面
          this.errReSelect(errTip)
        }
      }
    }
  },
  computed: {
    // 底部导航栏高度 单位px
    navigationBarHeight() {
      return uni.getStorageSync("menuInfo").navigationBarHeight || uni.getStorageSync("menuInfo").statusBarHeight / 2;
    },
    // 底部菜单padding掉导航栏的位置
    paddingBottom() {
      if (this.navigationBarHeight) {
        return "padding-bottom:" + this.navigationBarHeight + "px;";
      }
      else {
        return "";
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../stepStyles.scss";

::v-deep .stepContainer {
  border-bottom-left-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
}

::v-deep .uni-section {
  background-color: transparent !important;
  margin-top: 0 !important
}

::v-deep .input-placeholder {
  font-size: 28rpx;
  color: #999
}

::v-deep .uploadImg {
  padding: 0 !important;

  .cu-form-group {
    padding: 0 !important;
    max-height: 200rpx !important;

    .grid.col-4.grid-square>uni-view {
      padding-bottom: calc((100% - 100px) / 2) !important;
      height: 0;
      width: calc((100% - 100px) / 2) !important;
    }

    .grid.grid-square>uni-view {
      margin-right: 0;
      margin-bottom: 0;
    }
  }
}
</style>